<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>

    <style>
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            font-size: 16px;
        }

        @media (max-width: 768px) {

            .review {
                height: auto;
            }
            .content{
                position: static;
                padding-top: 0px;
            }
        }

        @media (min-width: 768px) {

            .review {
                height: 41px;
            }
            .content{
                position: absolute;
                top: 0;
                left: 0;
                padding-top: 80px;
            }
        }

        @media (min-width: 1300px) {
            .space {
                margin: 0 240px;
            }
        }

        @media (max-width: 1300px) {
            .space {
                margin: 0;
            }
        }

        form table thead {
        }

        form table thead tr th,
        form table thead tr td {
            height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
        }

        form table thead tr:first-child > th {
            width: 15%;
        }

        form table thead tr:first-child > td {
            width: 17%;
        }

        td .form-control-feedback {
            top: 8px !important;
        }

        .shortcut-body {
            cursor: pointer;
            vertical-align: middle;
            text-align: center;
        }

        .close {
            position: fixed;
            z-index: 9999999;
            opacity: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

        .wave {
            font-weight: 800;
            font-size: 16px;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            overflow: visible;
            cursor: pointer;
            z-index: 10;
            box-sizing: border-box;
            transform: scale(0);
            transition: transform .3s cubic-bezier(.68, -.55, .265, 1.55);
        }

        span.wave.in {
            transform: scale(1);
        }

        span.wave.in:after {
            content: "";
            top: 3px;
            left: 5px;
            position: absolute;
            width: 40px;
            height: 40px;
            background-image: radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
            border: 1px solid #fff;
            animation: wave 5s 3s infinite linear;
            zoom: 1;
            opacity: 0;
            border-radius: 50%;
            background-clip: padding-box;
            box-sizing: border-box;
        }

        .btn-flow {
            margin: 2px 7px 8px 5px !important;
            min-height: 65px;
            float: left;
            display: block;
            min-width: 88px;
        }

        .no-border {
            border: none !important;
            box-shadow: none !important;
        }

        .dd-item, a {
            cursor: pointer !important;
        }

        #divreview > span {
            font-size: 14px;
        }

        #divhistoryreview > span {
            color: #336633;
            font-weight: 400;
        }

        #divhistoryreview > span:last-child {
            color: #FF9966;
        }

        #divreview > span:nth-child(2n+1) {
            font-weight: 800;
        }

        #divreview > span:nth-child(2n) {
            padding-right: 25px;
        }

        .modal-fulsreen {
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            position: absolute !important;
            top: 0;
            left: 0;
            overflow: hidden;
        }

        .modal-fulsreen .modal-content {
            width: 100%;
            height: 100%;
        }

        .widget-body > form {
            padding-bottom: 20px;
        }

        form > table th {
            text-align: right;
            vertical-align: middle !important;
            text-align: right !important;
            padding-right: 10px !important;
            font-size: 16px;
        }

        form > table th label {
            font-weight: 800 !important;
            font-size: 16px !important;
        }

        .close > div {
            position: absolute;
            color: red;
            font-size: 50px;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -150px;
        }

        .review > div {

            line-height: 40px;
            padding-left: 25px;
            background-color: #ddd;
        }

        .content {
            width: 100%;
            height: 100%;

            overflow: hidden;

        }
    </style>

    <script type="text/javascript" src="/assets/js/workflow/js/designer/code/mathhelper.js"></script>

    <script type="text/javascript">
        var csss = [
            '/assets/css/bootstrap.min.css',
            '/assets/css/beyond.min.css',
            '/assets/css/font-awesome.min.css',
            '/assets/css/animate.min.css',
            '/assets/css/metro.css',
            '/assets/css/page.css',
            '/assets/js/workflow/css/workflow.css',
            '/assets/css/dataTables.bootstrap.css',
            '/assets/js/workflow/css/ControlStyle.css'];
        var jss = [
            '/assets/js/webapp.js',
            '/assets/js/jquery.min.js',
            '/assets/js/jquery.cookie.js',
            '/assets/js/jquery-1.10.2.plugin.js',
            '/assets/js/bootstrap.min.js',
            '/assets/js/skins.min.js',
            '/assets/js/culture.js',
            '/assets/js/controls/progress/progress.js',
            '/assets/js/ztree/jquery.ztree.all-3.5.js',
            '/assets/js/validation/jquery.bootvalidate.js',
            '/assets/js/datetime/bootstrap-datepicker.js',
            '/assets/js/bootgrid/jquery.bootgrid.js',
            '/assets/js/selectpicker/jquery.selectpicker.js',
            '/assets/js/selectpicker/jquery.checkboxpicker.js',
            '/assets/js/workflow/js/designer/code/sqlhelper.js',
            '/assets/js/workflow/js/enum/enum.js',
            '/assets/js/workflow/js/designer/code/mathhelper.js',
            '/assets/js/workflow/js/designer/config/styledefine.js',
            '/assets/js/workflow/js/monitor/monitor.js',
            '/assets/js/workflow/js/designer/config/activitytype.js',
            '/assets/js/workflow/js/designer/code/arrayhelper.js',
            '/assets/js/controls/attachment/richfit.attachment.js',
            '/assets/js/moment.js',
            '/assets/js/workflow/js/prove/workflow-1.0.0.core.js'];
        for (m = 0; m < csss.length; m++) {
            document.write('<link href="' + csss[m] + '?license=' + new Date().getTime() + '" rel="stylesheet" />');
        }
        for (n = 0; n < jss.length; n++) {
            document.write('<script src="' + jss[n] + '?license=' + new Date().getTime() + '"><' + "/" + 'script>');
        }


    </script>
</head>
<body>

<div id="divClose" class="close">
    <div id="divCloseTimer"></div>
</div>

<div class="bg-themeprimary review">
    <div id="divreview"></div>
</div>

<div id="divhistoryreview"
     style=" line-height: 40px; padding-left: 25px;font-weight:800; font-size:14px  ">
    流程状态：
</div>

<div class="content">
    <div style="width:100%;overflow-y:auto; height:100%;">
        <div class="space">
            <div class="page-container">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-9 col-sm-9 col-md-8 col-xs-12" id="divWfContainer"></div>
                        <div class="col-lg-3 col-sm-3 col-md-4 col-xs-12 ">
                            <div class="widget" id="suggestPanel" style="display: none;">
                                <div class="widget-header  bg-themeprimary" style="border-radius:3px 3px 0 0;">
                                    <i class="widget-icon fa fa-flag"></i>
                                    <span class="widget-caption">审批意见</span>
                                </div>
                                <div class="widget-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <textarea id="suggest" name="suggest" rows="5"
                                                      class="form-control" placeholder="审批意见"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="widget" id="divProve">
                                <div class="widget-header  bg-themeprimary" style=" border-radius:3px 3px 0 0;">
                                    <i class="widget-icon glyphicon glyphicon-retweet"></i>
                                    <span class="widget-caption">审批操作</span>
                                </div>
                                <div class="widget-body">
                                    <div class="row">
                                        <div class="col-lg-12" id="btnContainer"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="widget">
                                <div class="widget-header  bg-themeprimary" style=" border-radius:3px 3px 0 0;">
                                    <i class="widget-icon glyphicon glyphicon-cloud"></i>
                                    <span class="widget-caption">公共操作</span>
                                </div>
                                <div class="widget-body">
                                    <div class="row">
                                        <div class="col-lg-12" id="divCommandButton">
                                            <a class="btn btn-primary  btn-flow"
                                               onclick="$('#attachmentModal').modal();" href="#">
                                                <span class="bg-themesecondary" id="attachmentSpan"
                                                      style=" display: inline-block;line-height:18px; text-align:center; font-size:12px; width:18px; height:18px; color: white; position: absolute; top:2px; right: 2px; border-radius: 9px;"></span>
                                                <div class="glyphicon glyphicon-paperclip"
                                                     style="font-size: 30px;"></div>
                                                <div class="shortcut-title">附件</div>
                                            </a>
                                            <a class="btn btn-primary btn-flow" onclick="$('#monitorModal').modal();"
                                               href="#">
                                                <div class="glyphicon glyphicon-picture" style="font-size: 30px;"></div>
                                                <div class="shortcut-title">流程图</div>
                                            </a>
                                            <a class="btn btn-primary btn-flow" onclick="$('#historyModal').modal();"
                                               href="#">
                                                <div class="glyphicon glyphicon-time" style="font-size: 30px;"></div>
                                                <div class="shortcut-title">审批历史</div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<div class="modal fade" id="attachmentModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="widget">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon glyphicon glyphicon-paperclip"></i>
                    <span class="widget-caption">附件</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="row">
                        <div class="col-lg-12" id="attachmentConainer"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="historyModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="widget">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon glyphicon glyphicon-time"></i>
                    <span class="widget-caption">审批历史</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="row">
                        <div class="col-lg-12" id="historyConainer"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="monitorModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fulsreen">
        <div class="modal-content">
            <div class="widget">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon glyphicon glyphicon-picture"></i>
                    <span class="widget-caption">流程图</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div id="monitorCotnainer" style="position:relative;"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="modal fade" id="backModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="widget">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon fa fa-user"></i>
                    <span class="widget-caption">可退回节点</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="row">
                        <div class="col-lg-12 ">
                            <div class="orders-container">
                                <ul class="orders-list" id='aList'></ul>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="color:red; text-align:left;">
                    选择待退回的步骤
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="wordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="widget">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon fa fa-user"></i>
                    <span class="widget-caption">正文模板</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <ul id='wordContainer'></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id='userModal' class='modal fade'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class="widget">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon fa fa-user"></i>
                    <span id='divUserTitle' class="widget-caption">正文模板</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="row" id='divUser'>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type='button' id='btnSubmitWorkflow' class='btn  btn-bar'>提交</button>
                    <button type='button' id='btnClose' class='btn btn-default' data-dismiss='modal'>关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id='signatureModal' class='modal fade'>
    <form>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class="widget">
                    <div class="widget-header bg-themeprimary">
                        <i class="widget-icon fa fa-user"></i>
                        <span class="widget-caption">数字签名</span>
                        <div class="widget-buttons">
                            <a data-dismiss="modal">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div class="row">
                            <div class="col-lg-12 col-sm-12 col-md-12">
                                <label for="USER_PASSWORD">签名密码</label>
                                <input type="password" class="form-control" name="USER_PASSWORD" id="USER_PASSWORD"
                                       placeholder="请输入签名密码，密码与工资密码一致">
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-bar" data-loading-text="处理中..."><i
                                class="glyphicon glyphicon-check"></i>确定
                        </button>
                        <button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div style="display:none">
    <iframe id="iframeWord"></iframe>
</div>

<div id="template" style=" display:none;">
    <a class="btn btn-primary btn-flow">
        <div class="glyphicon glyphicon-floppy-saved" style="font-size: 30px;"></div>
        <div class="shortcut-title"></div>
    </a>

    <li class="dd-item dd2-item" data-id="13">
        <div class="dd-handle dd2-handle">
            <i class="normal-icon fa"></i>

            <i class="drag-icon fa fa-arrows-alt "></i>
        </div>
        <div class="dd2-content">First Level</div>
    </li>


    <li class="order-item">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-left">
                <div class="item-booker">Ned Stards</div>
                <div class="item-time">
                    <i class="fa fa-calendar"></i>
                    <span></span>
                </div>
                <div class="item-time">
                    <i class="fa-pencil"></i>
                    <span></span>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-right">
                <div class="item-price">
                    <a class="btn btn-danger">退回</a>
                </div>
            </div>
        </div>

    </li>
</div>

<script type="text/javascript">
    (function ($) {
        $.fn.setdata = function (data, isDetail) {
            var $form = $(this);

            function formatData(control, value) {
                if (control.data("dateFormat")) {
                    return $.DateTime(value, control.data("dateFormat"));
                }
                return value;
            }

            function generateControl(tagName, value, control, id) {
                if (value == null) return;
                var c = $("<" + tagName + "'>").attr('class', control.attr('class')).addClass("no-border").html(value).attr('id', id);
                if (tagName == "p")
                    c.css('height', 'auto');

                control.after(c).remove();
                return control;
            }

            if (isDetail) {
                $.each(data, function (id, value) {

                    if (value == null) return;
                    var control = $($.format("*[name={0}]", id), $form);
                    if (control.length > 0) {
                        if (value == null) {
                            control.css('display', 'none');
                            return;
                        }
                        value = formatData(control, value);
                        if (control.is("input")) {
                            var controlType = control.attr("type");

                            switch (controlType) {
                                case 'text':
                                    generateControl('span', value, control, id);
                                    break;
                                case 'checkbox':
                                    var text = "";
                                    var valueList = value.split(",");


                                    control.each(function (i) {
                                        var $this = $(this);
                                        $.each(valueList, function (j, l) {
                                            if ($this.val() == l) {
                                                text += $this.parent().find("span").html() + ",";
                                            }

                                        });

                                    });
                                    if (text.length > 0) {
                                        text = text.substring(0, text.length - 1);
                                    }

                                    var span = $("<span>").attr('class', "form-control").addClass("no-border").html(text);
                                    control.eq(0).parents().eq(3).html("").append(span);
                                    break;
                                case 'radio':
                                    control.each(function (i) {
                                        if ($(this).val() == value) {
                                            $(this).attr("checked", "checked");
                                        }
                                    });
                                    break;
                            }


                        }
                        else if (control.is("select")) {
                            generateControl('span', control.find("option[value='" + value + "']").html(), control, id);
                        }
                        else if (control.is('textarea')) {
                            value = value.replace(/[\r][\n]/g, '<br/>');
                            generateControl('p', value, control, id);
                        }
                        else {
                            control.addClass("no-border");
                            control.html(value);
                        }
                    }

                })
            }
            else {
                $.each(data, function (id, value) {
                    if (value == null) return;
                    var control = $($.format("*[name={0}]", id), $form);
                    if (control.is("select") || control.is('textarea'))
                        control.val(formatData(control, value));

                    else if (control.is("input")) {
                        var controlType = control.attr("type");
                        switch (controlType) {
                            case 'text':
                                control.val(formatData(control, value));
                                break;
                            case 'check':
                                control.each(function (i) {
                                    if ($(this).val() == value) {
                                        $(this).attr("checked", "checked");
                                    }
                                });
                                break;
                            case 'radio':
                                control.each(function (i) {
                                    if ($(this).val() == value) {
                                        $(this).attr("checked", "checked");
                                    }
                                });
                                break;
                        }
                    } else {
                        control.html(formatData(control, value));
                    }
                })
            }


        }
    })(jQuery)

    var wfParm = {};
    //url参数
    var parm,
    //流程表单
            divWfContainer,
    //按钮区
            btnContainer,
    //html模板
            template,
            btnHtml,
            historyConainer,
            divCommandButton,
            iframeWord,
            wordItem,
    //判断是否首次加载
            attachmentSpan,
            callbackTemplate,
            workflow;

    $(document).ready(function () {
        divWfContainer = $("#divWfContainer"),
                divCommandButton = $("#divCommandButton"),
                historyConainer = $("#historyConainer");
        btnContainer = $("#btnContainer"),
                template = $("#template"),
                attachmentSpan = $("#attachmentSpan"),
                iframeWord = $("#iframeWord"),
                parm = $.evalJSON(decodeURIComponent($.Request.QueryString("P"))),
                btnHtml = $(".btn-flow", template),
                wordItem = $(".dd-item", template),
                callbackTemplate = $(".order-item", template);
        divWfContainer.load($.format("/views/workflow/formfiles/{0}.html?license={1}", parm.templateId, new Date().getTime()), function () {
            core.Init(parm);
            $("#divreview").html($.format("<span>当前流程：</span><span>{0}</span><span>当前状态：</span><span>{1}</span><span>当前用户：</span><span>{2}</span><span>开始时间：</span><span>{3}</span>",
                    core.Template.templateName,
                    core.currentactivity.activityName,
                    $.cookie(app.name + '_name'),
                    moment(core.IsCreate ? new Date() : core.Instance.createTime).formatUTC("YYYY-MM-DD")));
        });
    });
</script>
</body>
</html>
